<template>
  <div>
    <el-drawer
      v-model="drawer"
      direction="btt"
      :show-close="false"
      :with-header="false"
      :size="210"
      :destroy-on-close="true"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <template #default>
        <div v-loading="isLoading">
          <div class="flex items-center justify-between px-2">
            <span class="text-sm font-bold text-slate-600 dark:text-slate-400">
              回复 {{ forwardID }}# 留言
            </span>
            <span class="opacity-30 text-xs" v-if="userStore.user == null">
              如您需要实名发表请先登录
            </span>
          </div>

          <div class="my-2">
            <el-input
              v-model="text"
              type="textarea"
              clearable
              :autosize="{ minRows: 4, maxRows: 4 }"
              resize="none"
              placeholder="请输入回复内容"
            ></el-input>
          </div>
          <div class="flex items-center justify-between px-2">
            <span>
              <el-checkbox v-model="isAnonymous" :disabled="userStore.user == null"
                >匿名发表</el-checkbox
              >
            </span>
            <span>
              <el-button type="primary" link @click="handleCancel">取消</el-button>
              <el-button type="primary" @click="handleReply"
                >提交{{ isAnonymous ? '匿名' : '实名' }}回复</el-button
              >
            </span>
          </div>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { ElNotification, ElMessageBox } from 'element-plus'
import useViewStore from '@/stores/view.js'
import useUserStore from '@/stores/user.js'

const viewStore = useViewStore()
const userStore = useUserStore()

const user = computed(() => userStore.user)

const drawer = ref(false)
const isLoading = ref(false)

const office = ref(0)
const text = ref('')
const isPublic = ref(true)
const isAnonymous = ref(true)
const mentionedUsers = ref([])
const forwardID = ref(0)

const open = (dataID = -1) => {
  if (dataID > -1) {
    // reset form data
    forwardID.value = viewStore.data[dataID].code
    text.value = ''
    office.value = viewStore.data[dataID].office
    isAnonymous.value = true
    isPublic.value = true
    mentionedUsers.value = []
    //  show drawer
    drawer.value = true
  }
}

const handleReply = () => {
  if (text.value.length == 0) {
    ElNotification({
      title: '评论内容不能为空',
      type: 'error'
    })
  } else {
    ElMessageBox.confirm('发表后将无法再次修改或删除回复，确认内容正确并要提交吗？', '内容确认', {
      confirmButtonText: '确认发表回复',
      cancelButtonText: '取消',
      type: 'warning',
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false
    })
      .then(() => {
        isLoading.value = true
        let params = {
          text: text.value,
          forward: forwardID.value,
          office: office.value,
          public: isPublic.value,
          anonymous: isAnonymous.value,
          user: user.value
        }
        viewStore
          .reply(params)
          .then((data) => {
            if (data.result && data.result2) {
              ElNotification({
                title: '已发表评论',
                type: 'success'
              })
              viewStore.load().then(() => {
                isLoading.value = false
                close()
              })
            } else {
              ElNotification({
                title: '发表评论的时候出错了',
                type: 'warning'
              })
              isLoading.value = false
            }
          })
          .catch((error) => {
            ElNotification({
              title: '发表评论的时候出错了',
              type: 'error'
            })
            isLoading.value = false
          })
      })
      .catch(() => {})
  }
}

const handleCancel = () => {
  if (text.value.length > 0) {
    ElMessageBox.confirm('您已填写回复内容，确定要放弃已编辑内容并取消回复吗？', '取消回复', {
      confirmButtonText: '手滑了~',
      cancelButtonText: '放弃已编辑内容',
      type: 'warning',
      closeOnClickModal: false,
      closeOnPressEscape: false,
      showClose: false
    }).catch(() => {
      close()
    })
  } else {
    close()
  }
}

const close = () => {
  text.value = ''
  drawer.value = false
}

defineExpose({ open, close })
</script>
